<template>
  <div class="xiaohuo">
    <!-- 顶部工具栏 -->

    <el-menu :default-active="activeIndex"
             class="el-menu-demo"
             mode="horizontal"
             @select="handleSelect"
             background-color="#545c64"
             text-color="#fff"
             active-text-color="#ffd04b">
      <el-menu-item index="1">添加</el-menu-item>
      <el-menu-item index="2">删除</el-menu-item>
      <el-menu-item index="3">查询</el-menu-item>
      <el-menu-item index="4">修改</el-menu-item>
    </el-menu>
    <!-- 操作的表格 -->
    <el-table ref="multipleTable"
              :data="tableData.filter(
          (data) => !search||search)"
              tooltip-effect="dark"
              style="width: 100%"
              @selection-change="handleSelectionChange">
      <el-table-column type="selection"
                       width="55"> </el-table-column>

      <el-table-column prop="date"
                       label="时间"
                       width='180'>
      </el-table-column>

      <el-table-column prop="ordenumb"
                       label="订单号"
                       width='180'> </el-table-column>

      <el-table-column prop="name"
                       label="商品"
                       width='180'> </el-table-column>

      <el-table-column prop="price"
                       sortable
                       label="销量"
                       width='180'> </el-table-column>

      <el-table-column prop="address"
                       label="操作">
        <template slot="header">

          <!-- 下拉选择 -->
          <div style="margin-top: 15px;">
            <el-input v-model="search"
                      size="mini"
                      placeholder="输入关键字搜索">
              <el-select v-model="select"
                         slot="prepend"
                         placeholder="请选择">
                <el-option label="商品"
                           value="商品"></el-option>
                <el-option label="订单号"
                           value="订单号"></el-option>
                <el-option label="时间"
                           value="时间"></el-option>
                <el-option label="销量"
                           value="销量"></el-option>
              </el-select>
              <el-button slot="append"
                         icon="el-icon-search"
                         @click="queryBtn"></el-button>
            </el-input>
          </div>

        </template>

        备注：暂无备注
      </el-table-column>

    </el-table>
    <!-- 底部分页 -->
    <el-pagination background
                   layout="prev, pager, next"
                   :page-size='5'
                   :total="AllList"
                   @current-change="changeTo">
    </el-pagination>
  </div>
</template>

<script>
import { getXiaoHuo } from '../../api/xiaoHuo';
export default {
  data () {
    return {
      // 工具栏激活
      activeIndex: "1",
      search: "",
      // 当前显示几条
      tableData: [],
      // 总数据
      dataAll: [],
      //被选中的项
      multipleSelection: [],
      // 总条数有多少条
      AllList: 0,
      // 多选框内容
      select: '商品'
    };
  },
  methods: {
    // 搜索请求
    queryBtn () {
      // 总条数
      this.multipleSelection = this.dataAll.filter(
        (data) => {
          switch (this.select) {
            case '商品':
              return data.name.toLowerCase().includes(this.search.toLowerCase());
            case '订单号':
              return data.ordenumb.toLowerCase().includes(this.search.toLowerCase());
            case '时间':
              return data.date.toLowerCase().includes(this.search.toLowerCase());
            case '销量':
              return data.price.toLowerCase().includes(this.search.toLowerCase());
            default:
              break;
          }
        })
      // 第一页默认显示五个
      this.tableData = this.multipleSelection.slice(0, 5);
      // 获取查到数组的总长度
      this.AllList = this.multipleSelection.length;
    },
    // 下一页
    changeTo (data) {
      data -= 1;
      this.tableData = this.multipleSelection.slice(data * 5, data * 5 + 5);
    },
    //导航栏切换
    handleSelect (event) {
      console.log(event);
    },

    tableRowClassName ({ row, rowIndex }) {
      if (rowIndex === 1) {
        return "warning-row";
      } else if (rowIndex === 3) {
        return "success-row";
      }
      return "";
    },

    handleSelectionChange (val) {
      this.multipleSelection = val;
    },
  },
  mounted () {
    // 自动请求数据，获取列表
    getXiaoHuo({ query: 'all' }).then(res => {
      // 总数据
      this.dataAll = res.data;
      // 显示五条给页面
      this.tableData = this.dataAll.slice(0, 5);
      // 当前显示几条
      this.AllList = res.data.length;
    })
  }
};
</script>

<style>
.el-select .el-input {
  width: 90px;
}
.input-with-select .el-input-group__prepend {
  background-color: #fff;
}
</style>